<template>
	<MobileSimulation ref="MobileSimulation">
		<Modal
			title="标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题"
			v-model="value"
			loading
			loading-confirm
			:before-close="before"
			:content-style="style">
			提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容
			提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容
			提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容
			提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容
			提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容
			提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容
			提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容
			提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容
			提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容
			提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容
			提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容
			提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容
			提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容
			提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容
			提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容
			<template v-if="slot" #title>
				标题插槽
			</template>
			<template v-if="slot" #loading>
				加载中
			</template>
			<template v-if="slot" #loading-confirm>
				按钮加载中
			</template>
		</Modal>
		<Button @click="alert" style="margin:10px 5px 0;">alert</Button>
		<Button @click="confirm" style="margin:10px 5px 0;">confirm</Button>
		<Button @click="serviceError" style="margin:10px 5px 0;">serviceError</Button>
	</MobileSimulation>
</template>

<script>
import MobileSimulation from '../../../components/MobileSimulation';
import Modal from '@/components/app/modal';
import Button from '@/components/app/button';
import {rootContainerVue} from '@/components/js/app/rootContainer';
window.Modal=Modal;
export default {
	name:'index',
	components:{
		MobileSimulation,
		Modal,
		Button,
	},
	data(){
		return {
			value:true,
			style:{
				height:'200px'
			},
			slot:false,
		};
	},
	computed:{
	},
	created(){
		this.$nextTick(function(){
			this.$refs.MobileSimulation.ready.then((doc) => {
				doc.body.append(rootContainerVue.$el);
			});
		});
	},
	methods:{
		before(){
			return new Promise(function(resolve){
				setTimeout(resolve,1000);
			});
		},
		alert(){
			Modal.alert({
				title:'标题',
				content:'提示内容提示内容',
			}).then((confirm) => {
				console.log('alert',confirm);
			});
		},
		confirm(){
			Modal.confirm({
				title:'标题',
				content:'提示内容提示内容',
			}).then((confirm) => {
				console.log('confirm',confirm);
			});
		},
		serviceError(){
			Modal.serviceError({
				content:'测试',
				info:'报错详情报错详情报错详情报错详情'
			}).then((confirm) => {
				console.log('serviceError',confirm);
			});
		},
	}
};
</script>

<style lang="scss">
</style>
